<template>
   <div class="container">
      <div class="login-boxtitle">
    <a href="#"><img alt="logo" src="@/assets/images/logo.png" id="img"/></a>
  </div>
   <div id="back" @click="backHome()">
            <img src="@/assets/images/back.png" alt="">
        </div>

      <fieldset>
      <legend> <h1>用户登录</h1></legend>
     <p>用户名：<input type="text" v-model="userName" /></p>
      <p>*密 &nbsp; 码：<input type="password" v-model="pwd" /></p>
      <br />
      <button @click="submitForm()" @keydown.enter="submitForm()">登录</button>
      <!-- <button @click="regestForm()">注册</button> -->
      <a href="/register">免费注册</a>
      </fieldset>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
// import { login, getUserInfo } from '@/api/login.js'
export default {
  name: 'LoginView',
  setup () {
    const router = useRouter()
    const userName = ref('')
    const pwd = ref('')

    function submitForm () {
      if (userName.value === 'admin' && pwd.value === '123') {
        window.localStorage.setItem('token', '123')
        // alert("登陆成功！")
        router.push({ path: '/' })
      } else {
        alert('登录失败，请输入正确信息！')
      }
    }

    //  function submitForm(){
    //         if (userName.value==!''&&pwd.value==!'') {
    //           login(userName.value,pwd.value).then((response) => {
    //             const resp = response.data;
    //            if (resp.flag) {
    //               //登录成功则获取用户信息
    //               getUserInfo(resp.data.token).then((response) => {
    //                 const respUser = response.data;
    //                 console.log(respUser);
    //                 if (respUser.flag) {
    //                     localStorage.setItem("msm-user",JSON.stringify(respUser.data));
    //                     localStorage.setItem("msm-token",resp.data.token)
    //                     this.$router.push("/")
    //                   } else {
    //                     alert("登录失败！")
    //                   }
    //                 });
    //               } else {
    //               alert("登录失败！")
    //               }
    //         })
    //     }
    //  }

    function backHome () {
      router.push({ path: '/' })
    }

    return {
      userName,
      pwd,
      submitForm,
      backHome
    }
  }
}
</script>

<style scoped>
#back>img{
    width:40px;height: 40px;
    position:absolute;
    margin-top: 20px;
    margin-left: 20px;
    cursor: pointer;
}
.container{
  background-image: url(~@/assets/images/11.jpg);
  background-size:cover;
  position: absolute;
  width: 100%;
  height: 100%;
}
fieldset {
  text-align: center;
  width: 550px;
  height: 450px;
  border: 2px solid #000;
  background-color:rgba(176, 180, 54, 0.5);
  margin-top:100px;
  margin-left:500px;
  padding-top: 60px;
}
input {
   width: 300px;
    height: 50px;
    background-color: rgb(231, 240, 240, 0.8);
    border-radius: 20px;
    border: none;
    text-align: center;
    margin-left: 10px;
    margin-right: 25px;
}
p {
  display: inline-block;
  margin-left: 20px;
  font-size: 22px;
}
button {
  width: 300px;
  height: 50px;
  text-align: center;
  background-color: #b0b436;
  margin-top:40px;
  margin-left: 30px;
  color: #fff;
  cursor: pointer;
  font-size: 24px
}
span {
  color: red;
  display: inline-block;
  margin-left: 90px;
}
#img{
  margin-left:400px;
  margin-top:70px;
  position:absolute;
}
fieldset>a{
  text-decoration: none;
  position: absolute;
  margin-left: 10px;
  margin-top: 150px;
  font-size:18px;
}
</style>
